<template>
    <n-space justify="center">
         <vue3videoPlay  v-bind="state" @ended="handleEnded"/>
    </n-space>
</template>
<script lang="ts" setup >
// require style
import 'vue3-video-play/dist/style.css'
import vue3videoPlay from 'vue3-video-play'
import { reactive } from 'vue';
import { viewed } from '@/api/student/chapter'

const props = defineProps({
    vedioUrl: {
        type: String,
        required: true
    },
    mediaID: {
        type: Number,
        require:true
    },
    isDone: {
        type: Boolean,
        require:true
    }
})

const state = reactive({
    width:'100%',
    height:'500px',
    src: props.vedioUrl, //预览视频文件地址
    control: true, //是否显示控制
    color: "#409eff", //主题色
    controlBtns:['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen'] ,//显示所有按钮,
    speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
    //speed: props.isDone,
    speed: false,
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false,  //关灯模式
    volume: 0.3, //默认音量大小
    mediaID : props.mediaID,
    currentTime:0,
});

function handleEnded(){
    if(!props.isDone){
        viewed({MID:props.mediaID});
    }
}

</script>